<html>

<head>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('echart'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

    <div class=" flex flex_column flex_1 background">
        <div class="title">总览</div>
        <div class="api_serve">
            <div class="api_head">
                <div class="head_title">API服务</div>
                <div class="head_href">前往应用</div>
            </div>
            <div class="api_data">
                <div class="api_data_left">

                    <div class="api_data_left_title">服务统计</div>
                    <div class="api_data_left_body">
                        <div class="api_data_left_progress">
                            <nz-progress nz-tooltip nzTitle="" [nzWidth]=180 nzType="circle" nzStrokeLinecap="square" [nzPercent]="60" [nzSuccessPercent]="30" [nzShowInfo]="false" nzStatus="exception">

                            </nz-progress>

                        </div>
                        <div class="progress_count">28</div>
                        <div class="api_data_left_data">
                            <div class="api_serve_status" style="margin-bottom: 10px;">
                                <span class="circle" style="background: #50D4AB;">
                        </span>可用<span class="status_count">12</span>
                            </div>
                            <div class="api_serve_status" style="margin-bottom: 10px;">
                                <span class="circle" style="background: #F66F6A;">
                        </span>异常<span class="status_count">8</span>
                            </div>
                            <div class="api_serve_status">
                                <span class="circle" style="background: #DFE1E6;">
                        </span>停用<span class="status_count">8</span>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="api_cut"></div>
                <div class="api_data_right">
                    <div class="api_data_right_title">
                        <div class="api_right_title_text">调用成功率</div>
                        <div class="api_img_div">
                            <img src="assets/images/icon_refresh.png" alt="" class="api_right_title_img"></div>
                    </div>
                    <div id="echart" style="width: 500px;height: 500px;"></div>
                </div>
            </div>
        </div>
        <div class="diyocr">
            <div class="api_head">
                <div class="head_title">自定义OCR</div>
                <div class="head_href">应用统计</div>
            </div>
            <div class="api_data">
                <div class="api_data_left">

                    <div class="api_data_left_title">应用数量</div>
                    <div class="api_data_left_body">
                        <div class="api_data_left_progress">
                            <nz-progress nz-tooltip nzTitle="" [nzWidth]=180 nzType="circle" nzStrokeLinecap="square" [nzPercent]="60" [nzSuccessPercent]="30" [nzShowInfo]="false" nzStatus="exception">

                            </nz-progress>

                        </div>
                        <div class="progress_count">28</div>
                        <div class="api_data_left_data">
                            <div class="api_serve_status" style="margin-bottom: 10px;">
                                <span class="circle" style="background: #50D4AB;">
                        </span>可用<span class="status_count">12</span>
                            </div>
                            <div class="api_serve_status" style="margin-bottom: 10px;">
                                <span class="circle" style="background: #F66F6A;">
                        </span>异常<span class="status_count">8</span>
                            </div>
                            <div class="api_serve_status">
                                <span class="circle" style="background: #DFE1E6;">
                        </span>停用<span class="status_count">8</span>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="api_cut"></div>
                <div class="api_data_right">
                    <div class="api_data_right_title">
                        <div class="api_right_title_text">调用成功率</div>
                        <div class="api_img_div">
                            <img src="assets/images/icon_refresh.png" alt="" class="api_right_title_img"></div>
                    </div>
                    <div class=""></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>